<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Love Messages</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #ffffff;
            font-family: Arial, sans-serif;
            position: relative;
        }
        /* 心形背景 */
        .heart-background {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1.2);
            width: 700px;
            height: 700px;
            background-color: #ffddee;
            opacity: 0.8;
            /* 更突出的不规则心形 */
            clip-path: path('M350,120 C420,20 540,100 580,220 C620,340 540,440 470,500 C400,560 350,580 350,580 C350,580 300,560 230,500 C160,440 80,340 120,220 C160,100 280,20 350,120 Z');
            z-index: -1;
            box-shadow: 0 0 20px rgba(255, 179, 204, 0.5);
        }
        .window {
            position: fixed;
            width: 150px;
            height: 100px;
            background-color: #ffddee;
            border: 1px solid #ffb3cc;
            border-radius: 5px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            cursor: move;
            transition: transform 0.1s ease-out;
        }
        .window-header {
            padding: 5px 10px;
            background-color: #ffb3cc;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
        .window-title {
            font-size: 12px;
        }
        .window-controls {
            display: flex;
            gap: 3px;
        }
        .control-button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ffffff;
        }
        .window-content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(100% - 24px);
            font-size: 16px;
            color: #ff6699;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 心形背景元素 -->
    <div class="heart-background"></div>
    <script>
        // 消息窗口总数
        const WINDOW_COUNT = 70;
        // 窗口数组
        const windows = [];
        // 当前拖拽的窗口
        let activeWindow = null;
        // 拖拽偏移量
        let offsetX, offsetY;
        
        // 消息内容数组
        const messages = [
            'I LOVE YOU!',
            '我爱你！',
            '一起去吃饭么',
            '宝儿 我想 好不好',
            '会一直陪你的',
            '坚定一点',
            '❤️心掉下来了',
            '不会离开',
            '突然觉得你好厉害',
            '只在乎你',
            '你最棒了',
            '我对你是没有条件的',
        ];

        // 生成随机位置
        function getRandomPosition() {
            const windowWidth = 150;
            const windowHeight = 100;
            const x = Math.random() * (window.innerWidth - windowWidth);
            const y = Math.random() * (window.innerHeight - windowHeight);
            return { x, y };
        }

        // 创建窗口
        function createWindow() {
            const windowElement = document.createElement('div');
            windowElement.className = 'window';
            
            const position = getRandomPosition();
            windowElement.style.left = `${position.x}px`;
            windowElement.style.top = `${position.y}px`;
            
            // 添加窗口头部
            const header = document.createElement('div');
            header.className = 'window-header';
            
            const title = document.createElement('div');
            title.className = 'window-title';
            title.textContent = '♡';
            
            const controls = document.createElement('div');
            controls.className = 'window-controls';
            
            // 创建三个控制按钮
            for (let i = 0; i < 3; i++) {
                const button = document.createElement('div');
                button.className = 'control-button';
                controls.appendChild(button);
            }
            
            header.appendChild(title);
            header.appendChild(controls);
            
            // 添加窗口内容
            const content = document.createElement('div');
            content.className = 'window-content';
            // 随机选择消息内容
            const randomMessage = messages[Math.floor(Math.random() * messages.length)];
            content.textContent = randomMessage;
            
            windowElement.appendChild(header);
            windowElement.appendChild(content);
            
            // 添加拖拽事件
            windowElement.addEventListener('mousedown', startDrag);
            
            return windowElement;
        }

        // 开始拖拽
        function startDrag(e) {
            activeWindow = this;
            // 确保当前窗口在最上层
            activeWindow.style.zIndex = windows.length + 1;
            
            // 计算偏移量
            const rect = activeWindow.getBoundingClientRect();
            offsetX = e.clientX - rect.left;
            offsetY = e.clientY - rect.top;
            
            // 阻止文本选择
            e.preventDefault();
        }

        // 拖拽中
        function drag(e) {
            if (activeWindow) {
                activeWindow.style.left = `${e.clientX - offsetX}px`;
                activeWindow.style.top = `${e.clientY - offsetY}px`;
            }
        }

        // 结束拖拽
        function endDrag() {
            activeWindow = null;
        }

        // 关闭所有窗口
        function closeAllWindows() {
            windows.forEach(window => {
                window.style.opacity = '0';
                window.style.transform = 'scale(0.8)';
                window.style.transition = 'opacity 0.3s, transform 0.3s';
                
                // 移除DOM元素
                setTimeout(() => {
                    if (window.parentNode) {
                        window.parentNode.removeChild(window);
                    }
                }, 300);
            });
            windows.length = 0;
        }

        // 初始化
        function init() {
            // 添加全局拖拽事件
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', endDrag);
            
            // 添加ESC键关闭事件
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    closeAllWindows();
                }
            });
            
            // 创建多个窗口
            for (let i = 0; i < WINDOW_COUNT; i++) {
                // 延迟创建，避免一次性创建太多DOM元素
                setTimeout(() => {
                    const window = createWindow();
                    windows.push(window);
                    document.body.appendChild(window);
                    
                    // 设置初始z-index
                    window.style.zIndex = i + 1;
                }, i * 50); // 每个窗口间隔50ms创建
            }
        }

        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>